<template>
  <a-modal
    :visible="visible"
    :title="options.title"
    :maskClosable="false"
    :confirmLoading="confirmLoading"
    :width="668"
    @cancel="cancelHandel"
  >
    <a-row>
      <a-col :xs="24" :md="24" :style="{ height: '350px' }">
        <vue-cropper
          ref="cropper"
          :img="options.img"
          :outputSize="options.outputSize"
          :outputType="options.outputType"
          :info="options.info"
          :canScale="options.canScale"
          :autoCrop="options.autoCrop"
          :autoCropWidth="options.autoCropWidth"
          :autoCropHeight="options.autoCropHeight"
          :fixed="options.fixed"
          :fixedNumber="options.fixedNumber"
          :full="options.full"
          :fixedBox="options.fixedBox"
          :canMove="options.canMove"
          :canMoveBox="options.canMoveBox"
          :original="options.original"
          :centerBox="options.centerBox"
          :height="options.height"
          :infoTrue="options.infoTrue"
          :maxImgSize="options.maxImgSize"
          :enlarge="options.enlarge"
          :mode="options.mode"
          @realTime="realTime"
        >
        </vue-cropper>
      </a-col>
      <!-- <a-col :xs="24" :md="12" :style="{ height: '350px' }">
        <div class="avatar-upload-preview_range">
          <img :src="previews.url" :style="previews.img" />
        </div>
      </a-col> -->
    </a-row>
    <template #footer>
      <a-button key="back" @click="cancelHandel">取消</a-button>
      <a-button
        key="submit"
        type="primary"
        :loading="uploadLoading"
        @click="uploadImg"
        >保存</a-button
      >
    </template>
  </a-modal>
</template>
<script>
import { VueCropper } from "vue-cropper";
import "vue-cropper/dist/index.css";
import request from "../../common/utils/request";
export default {
  name: "CropperModal",
  components: {
    VueCropper,
  },
  data() {
    return {
      visible: false,
      img: null,
      confirmLoading: false,
      uploadLoading: false,

      options: {
        img: "", //裁剪图片的地址
        outputSize: 1, //裁剪生成图片的质量(可选0.1 - 1)
        outputType: "JPG", //裁剪生成图片的格式（jpeg || png || webp）
        info: true, //图片大小信息
        canScale: false, //图片是否允许滚轮缩放
        autoCrop: true, //是否默认生成截图框
        autoCropWidth: 668, //默认生成截图框宽度
        autoCropHeight: 350, //默认生成截图框高度
        fixed: true, //是否开启截图框宽高固定比例
        fixedNumber: [16, 9], //截图框的宽高比例
        full: false, //false按原比例裁切图片，不失真
        fixedBox: true, //固定截图框大小，不允许改变
        canMove: false, //上传图片是否可以移动
        canMoveBox: true, //截图框能否拖动
        original: false, //上传图片按照原始比例渲染
        centerBox: false, //截图框是否被限制在图片里面
        height: false, //是否按照设备的dpr 输出等比例图片
        infoTrue: true, //true为展示真实输出图片宽高，false展示看到的截图框宽高
        maxImgSize: 3000, //限制图片最大宽度和高度
        enlarge: 2, //图片根据截图框输出比例倍数
        mode: "contain", //图片默认渲染方式
      },
      previews: {},
      url: {
        upload: "/sys/common/saveToImgByStr",
      },
    };
  },

  props: {
    //图片存储在oss上的上级目录名
    imgType: {
      type: String,
      default: "",
    },
  },
  methods: {
    edit(record) {
      const { options } = this;
      this.visible = true;
      this.options = Object.assign({}, options, record);
    },
    /**
     * 取消截图
     */
    cancelHandel() {
      this.confirmLoading = false;
      this.visible = false;
      this.$emit("cropper-no");
    },
    /**
     * 确认截图
     */
    okHandel() {
      const that = this;
      that.confirmLoading = true;
      // 获取截图的base64 数据
      //   this.$refs.cropper.getCropData((data) => {
      //     UpPic({
      //       img_type: this.imgType,
      //       img_byte: data,
      //     })
      //       .then((res) => {
      //         that.$emit('cropper-ok', res)
      //       })
      //       .catch((err) => {
      //         that.$message.error(err)
      //       })
      //       .finally(() => {
      //         that.cancelHandel()
      //       })
      //   })
    },
    //移动框的事件
    realTime(data) {
      // console.log(data, "data");
      this.previews = data;
    },
    //上传图片
    uploadImg() {
      //获取截图的blob数据
      this.$refs.cropper.getCropBlob((file) => {
        // this.$emit("imgDataResultBlob", file);
        // console.log(file, "file");
        // let formData = new FormData();
        // formData.append("image", file);
        // formData.append("dir", "village_business");

        // this.visible = false;
        //得到裁剪以后的图片文件,方便使用
        this.uploadLoading = true;
        this.$refs.cropper.getCropData((base64) => {
          request
            .post("/public", "/system/uploadImageFromBase64", {
              image: base64,
              dir: "village_business",
            })
            .then((res) => {
              this.$emit("imgDataResultBlob", res.fileUrl);
              this.visible = false;
              this.uploadLoading = false;
            });
          //得到裁剪以后的base64图片，方便使用
          // alert(
          //   "裁剪完毕，请看代码里面的uploadImg函数里面教你的使用方法，懒狗记得看"
          // );
          //如果你想使用file二进制文件上传！那么请用11111111里面的代码，尤其是formData这样的上传格式，否则上传失败
          //1111111111111111111111111111111111111111111111111111111111111111111111111
          // let formData = new FormData();
          // formData.append('file',data,"DX.jpg")
          // let {data: res} = await _this.$http.post('/api/file/imgUpload', formData)
          //1111111111111111111111111111111111111111111111111111111111111111111111111111
          //如果你用base64那用请用22222222
          //2222222222222222222222222222222222222222222222222222222222222222222
          //就正常post上传就行，这样都不会啊
          //22222222222222222222222222222222222222222222222222222222222222222
        });
      });
    },
  },
};
</script>

<style lang="less" scoped>
.avatar-upload-preview_range,
.avatar-upload-preview {
  position: absolute;
  top: 50%;
  transform: translate(50%, -50%);
  width: 180px;
  height: 180px;
  border-radius: 50%;
  box-shadow: 0 0 4px #ccc;
  overflow: hidden;
  img {
    // background-color: red;
    width: 100%;
    height: 100%;
  }
}
.avatar-upload-preview_range {
  border-radius: 0;
}
:deep(.cropper-modal[data-v-26736c2c]) {
  background: none;
}
:deep(.vue-cropper[data-v-26736c2c]) {
  background-image: none;
}
</style>
